<template>
	<view>
		<view class="top">

		</view>
		<view class="example">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="原密码" name="ymm">
					<uni-easyinput v-model="valiFormData.ymm" placeholder="请输入原密码" />
				</uni-forms-item>
				<uni-forms-item label="新密码" name="xmm1">
					<uni-easyinput v-model="valiFormData.xmm1" placeholder="请输入新密码" />
				</uni-forms-item>
				<uni-forms-item label="新密码" name="xmm2">
					<uni-easyinput v-model="valiFormData.xmm2" placeholder="请再次输入新密码" />
				</uni-forms-item>
			</uni-forms>
			<button class="btn" @click="xgmm('valiForm')">确定</button>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				valiFormData: {
					ymm: '',
					xmm1: '',
					xmm2: ''
				},
				seconds:3,
				// 校验规则
				rules: {
					ymm: {
						rules: [{
							required: true,
							errorMessage: '原密码不能为空'
						}, {
							format: 'number',
							errorMessage: '密码只能输入数字'
						}]
					},
					xmm1: {
						rules: [{
							required: true,
							errorMessage: '新密码不能为空'
						}, {
							format: 'number',
							errorMessage: '密码只能输入数字'
						}]
					},
					xmm2: {
						rules: [{
							required: true,
							errorMessage: '新密码不能为空'
						}, {
							format: 'number',
							errorMessage: '密码只能输入数字'
						}]
					}
				}
			}
		},
		methods: {
			...mapMutations('users', ['updateUserInfo', 'updateTokenInfo']),
			xgmm(ref) {
				// console.log(this.)
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					if (this.valiFormData.xmm1 === this.valiFormData.xmm2) {
						this.seconds = 4
						this.updateUserInfo({})
						this.updateTokenInfo('')
						this.timer = setInterval(() => {
							this.seconds--
							if (this.seconds <= 0) {
								clearInterval(this.timer)
								uni.switchTab({
									url: "/pages/my/my"
								})
								return
							}
							uni.showToast({
								title: this.seconds + ' 秒后自动跳转到登录页',
							})
						}, 1000)
					} else {
						uni.showToast({
							title: `前后密码不一致`
						})
					}

				}).catch(err => {
					console.log('err', err);
				})
				// uni.switchTab({
				// 	url:"/pages/my/my"
				// })
			},

		}
	}
</script>

<style lang="scss">
	body {
		background-color: #fff;
	}

	.top {
		height: 10px;
		background-color: rgb(240, 240, 240);
	}

	.example {
		height: 100%;
		padding: 15px;

	}

	.btn {
		background-color: rgb(67, 188, 247);
		width: 90%;
	}
</style>